<script setup>
import { ref, onMounted,reactive } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import Naviga from '@/components/Naviga.vue'
import { usePopupStore } from './stores/popup.js'
import { useAppStore } from './stores/app.js'
const route = useRoute()
const router = useRouter()
const popupState = usePopupStore()
const appState = useAppStore()
const isUpDate = ref(false)


let message = ref([])


onMounted(async() => {
  appState.sendAndroid('AndroidGetAppVersion', '', (version) => {
    appState.setVersion(version)
    let bool = appState.isVersion(version)
    isUpDate.value = bool
  })

  getNotice()
})


const checkUpdate = () => {
  if (isUpDate.value) {
    Snackbar('前往下载')
    appState.sendAndroid('AndroidDowApp', 'https://raw.githubusercontent.com/Le-u/Download/master/app/%E5%B0%8F%E8%B6%B4%E8%8F%9C.apk')
  } else {
    Snackbar('已是最新版')
  }

}

const getNotice = async() => {
  const res = await fetch('https://raw.githubusercontent.com/Le-u/Download/master/data/notice.json',{ cache: 'no-cache'})
  const data = await res.json()
  message.value = data
}

</script>

<template>
  <Naviga />
  <Swipe :message="message" />
  <RouterView class="app-router-wrap-view" />
  <VarPopup :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }" style="background-image:linear-gradient(90deg, rgba(26, 47, 76,1) 0%, rgba(29, 50, 79,1) 100%);" v-model:show="popupState.show" position="left"
    @click-overlay="popupState.closePopup()">
    <div class="popup-example-block">
      <var-cell border style="color:inherit" @click="checkUpdate">检查更新 {{ valueVersion }}</var-cell>
    </div>
  </VarPopup>
  <div class="app-route-btn" v-if="route.path !== '/'">
    <var-button type="primary" round @click="router.go(-1)">
      <var-icon name="chevron-left" size="40" />
    </var-button>
  </div>
</template>

<style lang="scss" scoped>
.popup-example-block {
  padding: 20px 10px;
  width: 35vw;
  color: #fff;
}

.app-router-wrap-view {
  background-image:  url(./assets/1690018822889.jpeg);
  background-position:  center ;
  background-size: cover;
  height: calc(100% - (54px + 25px) );
  overflow-y: auto;

  
}

.app-route-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

</style>
